.demo {
  height: 200px;
  text-align: center;
  border: 1px solid #666;

  &-wrap {
    height: 200px;
    z-index: -1;
    position: relative;
  }
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
@media (print), (prefers-reduced-motion) {
  .animated {
    animation: unset !important;
    transition: none !important;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;

    transform: translate3d(0, 100%, 0);
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;

    // transform-origin: 50% 50%;

    transform: scale(0);
  }

  to {
    opacity: 1;

    // transform-origin: 50% 50%;

    transform: scale(1);
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  to {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}
.fade-animation {
  &-enter {
    animation-name: fadeIn;
  }
  &-exit {
    animation-name: fadeOut;
  }
}
.slide-animation {
  &-enter {
    animation-name: slideInUp;
  }
  &-exit {
    animation-name: slideOutDown;
  }
}
.zoom-animation {
  &-enter {
    animation-name: zoomIn;
  }
  &-exit {
    animation-name: zoomOut;
  }
}

.slide {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.zoom {
  &__wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  width: 200px;
}
